<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>总监控台</title>
<link rel="stylesheet" type="text/css" href="../../../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../../../css/css.css" />
<link rel="stylesheet" type="text/css"
	href="../../../js/jquery-easyui-1.4.3/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css"
	href="../../../js/jquery-easyui-1.4.3/themes/icon.css" />
<link rel="stylesheet" type="text/css"
	href="../../../js/SimpleTree1.3/js/tree_themes/SimpleTree.css" />
<link rel="stylesheet" type="text/css"
	href="../../../css/colorReset.css" />
<style>
body {
	overflow: auto;
	background: none;
}

.console_con {
	width: 980px;
	margin: 0 auto;
	padding: 60px 10px 10px 10px;
	position: relative;
}
/*.console{
	width:80px;
	height:50px;
	border:1px solid rgb(210, 224, 242);
	background-color:rgb(210, 224, 242);
	border-radius:8px;
	margin:0 auto;
	position:absolute;
	top:0px;
	left:458px;
}
.screen {
border: 2px solid #333;
background: #eee;
}
.screen:before {
position: absolute;
content: '';
width: 14px;
height: 8px;
background: #333;
bottom: -10px;
left: 32px;
}
.screen:after {
position: absolute;
content: '';
width: 32px;
height: 4px;
background: #333;
bottom: -12px;
left: 23px;
}

.field_icon{width:30px; height:30px; position:absolute; left:23px; top:10px;}
.base {
width: 5px;
height: 8px;
background: #333;
position: absolute;
bottom: 3px;
left: 4px;
}
.base:before {
content: '';
position: absolute;
width: 5px;
height: 25px;
background: #333;
left: 12px;
bottom: 0;
}
.base:after {
content: '';
position: absolute;
width: 5px;
height: 13px;
background: #333;
left: 6px;
bottom: 0;
}
.bars2 {
width: 5px;
height: 18px;
background: #333;
position: absolute;
bottom: 3px;
left: 22px;
}
.bars2:after {
content: '';
position: absolute;
width: 32px;
height: 2px;
background: #333;
left: -22px;
bottom: 0px;
}*/
.console {
	width: 59px;
	height: 49px;
	margin: 0 auto;
	background: url(../../../images/console/console.png) left top no-repeat;
	position: absolute;
	top: 14px;
	left: 468px;
}

.lines {
	width: 580px;
	margin: 0 auto;
}

.line {
	width: 286px;
	height: 164px;
	border: 1px solid #b3d3e0;
	float: left;
	margin-right: -1px;
	margin-bottom: -1px;
}

.field_con {
	width: 860px;
	height: auto;
	overflow: hidden;
	position: absolute;
	top: 59px;
	left: 80px;
}

.field {
	display: block;
	width: 160px;
	height: 92px;
	float: left;
	margin: 26px 40px 27px 40px;
	background: url(../../../images/console/field_bg.png) left top no-repeat;
	text-shadow: 1px 1px 1px #CFCFCF;
	/*border:3px solid #95B8E7;
	background-color:rgb(210, 224, 242);
	border-radius:20px;
	box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
	background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
	background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
	background: linear-gradient(top,#f2f3f7,#e4e8ec);*/
	padding: 10px 20px;
}

.field:hover {
	background: url(../../../images/console/field_h_bg.png) left top
		no-repeat;
}

.field:active {
	margin: 28px 40px 24px 40px;
}
/*.field:hover{
	background:#ebeced;
	background: -webkit-linear-gradient(top,#fefefe,#ebeced);
	background: -moz-linear-gradient(top,#f2f3f7,#ebeced);
	background: linear-gradient(top,#f2f3f7,#ebeced);
}
.field:active{
	top:1px;
	margin:25px 40px 0 40px;
	background:#ebeced;
	box-shadow: 0 1px 3px #a8abae inset,0 3px 0 #fff;
	background: -webkit-linear-gradient(top,#e4e8ec,#e4e8ec);
	background: -moz-linear-gradient(top,#e4e8ec,#e4e8ec);
	background: linear-gradient(top,#e4e8ec,#e4e8ec);
}*/
.field h4 {
	height: 18px;
	line-height: 18px;
	text-align: center;
	font-weight: bold;
	margin: 0 0 5px 0;
	padding: 0 0 5px 0;
	border-bottom: 1px dashed #A0A0A0;
}

.field_li {
	overflow: hidden;
}

.field_li p {
	height: 30px;
	line-height: 30px;
}

.field_li p.state {
	/*width:15px;
	height:15px;*/
	width: 24px;
	height: 24px;
	/*text-shadow:1px 1px 1px #CFCFCF;
	border-radius:50%;*/
	box-shadow: 0 1px 2px #fff inset, 0 -1px 0 #a8abae inset;
}

@
-webkit-keyframes shan { 0% {
	opacity: 1.0;
}

50%
{
opacity
:
0
.5
;

  
}
100%
{
opacity
:
1
.0
;

  
}
}
.field_li p.normal {
	/*background-color:#00AC2E;*/
	background: url(../../../images/console/normal.png) left top no-repeat;
}

.field_li p.warn {
	/*background-color:#FF0004;*/
	background: url(../../../images/console/warn.png) left top no-repeat;
	-webkit-animation: shan 0.5s ease-in infinite;
	-moz-animation: shan 0.5s ease-in infinite;
}

.field_li .normal_tit {
	color: #5AE358;
}

.field_li .warn_tit {
	color: #FFC600;
}
</style>
</head>

<body>
	<div class="main">
		<div class="console_con">
			<div class="console screen">
				<div class="field_icon">
					<div class="base"></div>
					<div class="bars2"></div>
				</div>
			</div>
			<div class="lines">
				<div class="line"></div>
				<div class="line"></div>

				<div class="clearfix"></div>
			</div>
			<div class="field_con">
				<a href="javascript:void(0);" data-title="领域服务监控"
					data-url="../pages/InterfaceMonitoring/ServiceMonitoring/FieldServiceMonitor.html"
					class="field">
					<h4>加载中...</h4>
					<div class="field_li">
						<p class="fl">
							系统数：<span class="system_num">加载中...</span>
						</p>
						<p class="fr normal_tit">加载中...</p>
						<div class="clearfix"></div>
						<p class="fl">
							接口数：<span class="infterface_num">加载中...</span>
						</p>
						<p class="state normal fr"></p>
					</div>

				</a> <a href="javascript:void(0);" data-title="领域服务监控"
					data-url="../pages/InterfaceMonitoring/ServiceMonitoring/FieldServiceMonitor.html"
					class="field">
					<h4>加载中...</h4>
					<div class="field_li">
						<p class="fl">
							系统数：<span class="system_num">加载中...</span>
						</p>
						<p class="fr normal_tit">加载中...</p>
						<div class="clearfix"></div>
						<p class="fl">
							接口数：<span class="infterface_num">加载中...</span>
						</p>
						<p class="state normal fr"></p>
					</div>
				</a> <a href="javascript:void(0);" data-title="领域服务监控"
					data-url="../pages/InterfaceMonitoring/ServiceMonitoring/FieldServiceMonitor.html"
					class="field">
					<h4>加载中...</h4>
					<div class="field_li">
						<p class="fl">
							系统数：<span class="system_num">加载中...</span>
						</p>
						<p class="fr normal_tit">加载中...</p>
						<div class="clearfix"></div>
						<p class="fl">
							接口数：<span class="infterface_num">加载中...</span>
						</p>
						<p class="state normal fr"></p>
					</div>
				</a>

			</div>
		</div>

	</div>





	<script type="text/javascript" src="/webjars/json3/3.3.2/json3.min.js"></script>
	<script type="text/javascript"
		src="../../../js/jquery-easyui-1.4.3/jquery.min.js"></script>
	<script type="text/javascript"
		src="../../../js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
	<script type="text/javascript"
		src="../../../js/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../../../js/cook/public.js"></script>
	<script type="text/javascript" src="../../../js/cook/constants.js"></script>
	<script type="text/javascript"
		src="../../../js/cook/InterfaceMonitoring/ServiceMonitoring/MonitorConsole.js"></script>

	<script>
 


</script>
</body>
</html>